<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head>
    <meta charset="utf-8">
    <title>运维单评价</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=0.9, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="./layui/css/layui.css" th:href="@{/layui/css/layui.css}" media="all">
    <link rel="stylesheet" href="./style/admin.css" th:href="@{/style/admin.css}" media="all">
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="./js/html5.min.js" th:src="@{/js/html5.min.js}"></script>
    <script src="./js/respond.min.js" th:src="@{/js/respond.min.js}"></script>
    <![endif]-->
    <script type="text/javascript" charset="utf-8" th:inline="javascript">
        var ctxPath = /*[[@{/}]]*/'';
        var authority = [[${#authorization.expression('hasAuthority("超级管理员")')}]];
    </script>
    <link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">
    <style>
        #editor—wrapper {
            border: 1px solid #ccc;
            width: 850px;
            z-index: 100; /* 按需定义 */
        }

        #toolbar-container {
            border-bottom: 1px solid #ccc;
        }

        #editor-container {
            height: 400px;
        }
    </style>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <form class="layui-form" lay-filter="">
<!--            <div style="margin-left: 20px" class=" layui-form-item">-->
<!--                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="feedSubmit">提交</button>-->
<!--            </div>-->
            <div class="layui-form" lay-filter="layuiadmin-form-useradmin" id="layuiadmin-form-useradmin"
                 style="padding: 20px 20px 0 0;">
                <div class="layui-form-item">
                    <label class="layui-form-label">标题</label>
                    <div class="layui-input-inline">
                        <input type="text" name="title" lay-verify="content6" placeholder="请输入标题"
                               autocomplete="off"
                               class="layui-input" lay-verType="tips">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">电话</label>
                    <div class="layui-input-inline">
                        <input type="text" name="phone" lay-verify="phone" placeholder="请输入正确的手机号"
                               autocomplete="off"
                               class="layui-input" lay-verType="tips">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">邮箱</label>
                    <div class="layui-input-inline">
                        <input id="email" type="text" name="email" lay-verify="email" placeholder="请输入邮箱"
                               autocomplete="off"
                               class="layui-input" lay-verType="tips">
                    </div>
                </div>
                <label class="layui-form-label">故障描述</label>
                <div class="layui-content" >
                    <div id="editor—wrapper">
                        <div id="toolbar-container"><!-- 工具栏 --></div>
                        <div id="editor-container"><!-- 编辑器 --><input style="display: none" name="tet" lay-verify="content5"></div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item" style="margin-top: 6px">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="feedSubmit">提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">清除</button>
                </div>
            </div>
        </form>

    </div>
</div>
<script src="./js/common.js" th:src="@{/js/common.js}" charset="utf-8"></script>
<script src="./layui/layui.js" th:src="@{/layui/layui.js}"></script>
<script charset="utf-8" th:inline="javascript">
    layui.config({
        base: ctxPath //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table', 'form'], function () {
        var form = layui.form;
        form.verify({
            content6: function (value) {
                if (value.length === 0) {
                    return '内容不能为空';
                }
            },
            content5: function (value) {
                if (localStorage.getItem("content") === '') {
                    return '故障描述为必填项!';
                }
            }
        })
        form.on('submit(feedSubmit)', function (data) {
            var field = data.field;
            field.content = localStorage.getItem("content");
            if (localStorage.getItem("content") === '<p><br></p>') {
                layer.msg('故障描述为必填项！', {icon: 5, shift: 6});
                return false;
            }
            layui.admin.req({
                type: 'post',
                data: field,
                url: ctxPath + 'monitor-feed/save_feed',
                dataType: 'json',
                headers: {
                    [[${_csrf.headerName}]]: [[${_csrf.token}]]
                },
                success: function (result) {
                    var data = result.data;
                    if (data === webConst.SUCCESS) {
                        // table.reload('list-table'); //数据刷新
                        // layer.close(index); //关闭弹层
                        layer.msg('提交成功！', {icon: 6});
                        localStorage.setItem("content", "")
                    } else {
                        layer.msg('提交失败！', {icon: 5, shift: 6});
                    }
                },
                error: function () {
                    layer.msg('系统错误！', {icon: 5, shift: 6});
                }
            })
            return false;
        })
    })

</script>
</body>
</html>

<script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
<script>

    const {createEditor, createToolbar} = window.wangEditor
    const editorConfig = {
        MENU_CONF: {},
        placeholder: '在此描述具体故障...',
        onChange(editor) {
            const html = editor.getHtml()
            localStorage.setItem("content", html)
            // 也可以同步到 <textarea>
        },
        // onbeforeunload(file){
        //     for (const key in file){
        //         if (Object.hasOwnProperty.call(file,key)){
        //             const element = file[key];
        //             let name = element['name'];
        //             if (name){
        //                 let name = name.replace(/[`~!@#$%^&*()+=|{}':;',\\[\\].<>?~！@#￥%……&*（）——+|{}【】‘；：”“'。，、？]/g,'')
        //             }
        //         }
        //     }
        // }

    }
    editorConfig.MENU_CONF['uploadImage'] = {
        server: 'uploadImage',
        fieldName: 'file',
        allowedFileTypes: ['image/*', 'image/jpg', 'image/png', 'image/jpeg'],
        // uploadImgAccept: ['jpg', 'jpeg', 'png', 'gif', 'bmp'],
        async customInsert(res, insertFn) {
            const url = res.data.url
            insertFn(url)
        },
    }

    const editor = createEditor({
        selector: '#editor-container',
        html: '<p><br></p>',
        config: editorConfig,
        mode: 'default', // or 'simple'
    })

    const toolbarConfig = {}

    const toolbar = createToolbar({
        editor,
        selector: '#toolbar-container',
        config: toolbarConfig,
        mode: 'default', // or 'simple'
    })

</script>